<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    :footer="footerFlag ? null : undefined"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-row :gutter="10" type="flex" justify="space-around" align="middle">
      <a-col :span="24">
        <a-card  :bodyStyle="bodyStyle" style="overflow: auto;max-height: 58vh;">
          <a-tree
            checkable
            multiple
            :checkedKeys="checkedPermission"
            :treeData="permissionData"
            :autoExpandParent="autoExpandParentPermission"
            :selectedKeys="selectedKeys"
            @check="onCheckPermission"
            @select="onTreeNodeSelect">
            <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
              {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
            </span>
          </a-tree>
        </a-card>
      </a-col>
    </a-row>

  </j-modal>
</template>

<script>

import { queryPermissionTree, saveAppRolePermission } from '../service';

export default {
    name: 'RolePermissionModal',
    components: {
    },
    data () {
      return {
        title: '应用角色授权',
        width: 500,
        visible: false,
        footerFlag: false,

        // 已选角色权限
        checkedPermission: [],
        savePermission: [],
        permissionData: [],
        autoExpandParentPermission: true,

        savePermissions: {},
        roleId: '',
        appId: '',
        selectedKeys: [],

        bodyStyle: { 'min-height': '500px' }
      }
     },
    methods: {
       onTreeNodeSelect(id) {
        if (id && id.length > 0) {
          this.selectedKeys = id
        }
        this.$refs.datarule.show(this.selectedKeys[0], this.roleId)
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      edit (record, footerFlag) {
        this.visible = true;
        if (footerFlag === undefined) {
          this.footerFlag = false;
        } else {
          this.footerFlag = footerFlag;
        }
        this.roleId = record.id;
        this.appId = record.appId;
        this.permissionData = [];
        this.selectedKeys = [];
        this.checkedPermission = [];
        this.loadPermissionTree(this.appId, this.roleId);
      },
      handleSubmit(exit) {
        let that = this;
        let params = {
          roleId: this.roleId,
          appId: this.appId,
          permissionIds: this.savePermission
        }
        let isSuccess = true
        if (this.savePermission.length === 0) {
          this.$message.warning('请选择菜单/按钮权限');
          isSuccess = false;
          return false
        }
        if (isSuccess) {
          this.loading = true;
          saveAppRolePermission(params).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.loading = false;
              that.$emit('ok');
              if (exit) {
                that.close()
              }
            } else {
              that.$message.error(res.message);
              that.loading = false;
              if (exit) {
                that.close()
              }
            }
          });
        //   saveTenantRoleAppPermission(params).then((res) => {
        //     if (res.success) {
        //       that.$message.success(res.message);
        //       that.loading = false;
        //       that.$emit('ok');
        //       if (exit) {
        //         that.close()
        //       }
        //     } else {
        //       that.$message.error(res.message);
        //       that.loading = false;
        //       if (exit) {
        //         that.close()
        //       }
        //     }
        //   })
        }
      },
      handleCancel () {
        this.close()
      },
      onCheckPermission (o, e) {
        this.checkedPermission = [...o];
        let savePermissions = [...o];
        let parentPermission = e.halfCheckedKeys;
        savePermissions.push(...parentPermission);
        this.savePermission = savePermissions;
      },
      loadPermissionTree(appId, roleId) {
        queryPermissionTree(appId, roleId, {}).then((res) => {
          if (res.success) {
            this.permissionData = res.result.treeList;
            this.checkedPermission = res.result.checkPermissionIds;
            this.savePermission = res.result.savePermissionIds;
          }
        });
      }
    }
  }
</script>
